<!DOCTYPE html>
<!-- html:5 缩写-->
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    th,
    td {
        width: 4em;
        text-align: center;
    }
    
    h2 {
        position: relative;
    }
    
    h2>span {
        user-select: none;
        position: absolute;
        margin-left: -1.5em;
        text-align: center;
        line-height: 2em;
        display: inline-block;
        width: 2em;
        height: 2em;
        font-size: 8px;
        border-radius: 50%;
        background-color: red;
        color: #fff;
    }
</style>

<body>
    <!-- div#app 缩写  综合案例 Todolist-->
    <div id="app">
        <h2>礼物清单表🛒<span>{{Total}}</span></h2>
        <table border="2px">
            <tr>
                <th>名字</th>
                <th>数量</th>
            </tr>
            <tr v-for="(item, index) in list" :key="item.id">
                <td>{{item.name}}</td>
                <td>{{item.num+item.unit}}</td>
            </tr>
        </table>
        <p>礼物总数：{{Total}}</p>
    </div>
    <script src="vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                list: [{
                    id: 1,
                    name: '篮球',
                    num: 3,
                    unit: '颗'
                }, {
                    id: 2,
                    name: '玩具',
                    num: 2,
                    unit: '头'
                }, {
                    id: 3,
                    name: '铅笔',
                    num: 5,
                    unit: '支'
                }, ]
            },
            computed: {
                Total() {
                    // let result = 0;
                    // 循环实现方法
                    // this.list.forEach(items => {
                    //     result += items.num
                    // });
                    // 通过数组的 reduce 方法实现
                    return this.list.reduce((sum, item) => sum + item.num, 0)
                }
            }
        })
    </script>
</body>

</html>